<template>
	<view class="gifts">
		<view class="gift" v-for="(gift, index) in gifts" :key="index">
			<text>{{gift.name}}</text>
			<canvas class="canvas" :canvas-id="'canvas_'+gift.value" :id="'canvas_'+gift.value"
				@touchstart="touchstart($event, index)" @touchmove="touchmove($event, index)"
				@touchend="touchend($event, index)"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultList: [{
						name: '成都',
						value: 1
					},
					{
						name: '重庆',
						value: 2
					},
					{
						name: '长沙',
						value: 3
					},
					{
						name: '西安',
						value: 4
					},
					{
						name: '大理',
						value: 5
					},
					{
						name: '桂林',
						value: 6
					},
					{
						name: '厦门',
						value: 7
					},
					{
						name: '苏州',
						value: 8
					},
					{
						name: '杭州',
						value: 9
					},
				],
				gifts: [

				],
				canvasList: [],
				ctx: null
			};
		},
		created() {
			this.initData()
			// this.$nextTick(()=>{
			// 	const ctx = uni.createCanvasContext('myCanvas')
			// 	ctx.setFillStyle('red')
			// 	ctx.fillRect(0, 0, 150, 200)
			// 	ctx.setFillStyle('blue')
			// 	ctx.fillRect(150, 0, 150, 200)
			// 	ctx.clearRect(10, 10, 150, 75)
			// 	ctx.draw()
			// })
		},
		methods: {
			initData() {
				this.gifts = this.defaultList

				this.$nextTick(() => {
					this.gifts.forEach((item, index) => {
						this.canvasList[index] = {
							ctx: null
						}
						this.canvasList[index].ctx = uni.createCanvasContext('canvas_' + item.value)
						this.canvasList[index].ctx.setFillStyle('rgba(150,150,150,1)')
						var grd = this.canvasList[index].ctx.createLinearGradient(0,0,200,0); 
						grd.addColorStop(0,"gray");
						grd.addColorStop(1,"white");
						this.canvasList[index].ctx.fillRect(0, 0, 140, 140)
						
						// for (let x = 0; x < 140; x++) {
						// 	for (let y = 0; y < 140; y++ ) {
						// 		this.canvasList[index].ctx.setFillStyle('red')
						// 		this.canvasList[index].ctx.fillRect(0, 0, 10, 10)
						// 		this.canvasList[index].ctx.draw()
						// 	}
						// }
						
						this.canvasList[index].ctx.draw()
					})
				})
			},
			touchstart(e, index) {
				// console.log(e, index)
			},
			touchmove(e, index) {
				console.log(e, index, this.canvasList[index].ctx)
				// this.canvasList[index].ctx.clearRect(40 40, 20, 20)
				// this.canvasList[index].ctx.fillRect(e.touches[0].x, e.touches[0].y, 10, 10)
				// this.canvasList[index].ctx.arc(96, 96, 48, 0, 2 * Math.PI)
				// this.canvasList[index].ctx.clip()
				// this.canvasList[index].ctx.draw()
				let x = e.touches[0].x
				let y = e.touches[0].y  
				this.canvasList[index].ctx.globalCompositeOperation = 'destination-out';
				this.canvasList[index].ctx.beginPath();  
				this.canvasList[index].ctx.arc(x, y, 10, 0, 2 * Math.PI);
				this.canvasList[index].ctx.fill();
			},
			touchend(e, index) {
				// console.log(e, index)
				// this.canvasList[index].ctx.fillRect(150, 0, 150, 200)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gifts {
		width: 700rpx;
		display: flex;
		flex-wrap: wrap;
		margin: auto;

		.gift {
			width: calc(700rpx / 5);
			height: calc(700rpx / 5);
			margin: 16rpx;
			flex: none;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #eee;

			.canvas {
				position: absolute;
				width: calc(700rpx / 5);
				height: calc(700rpx / 5);
				z-index: 1;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		}
	}
</style>